<!DOCTYPE html> <!-- -*- html -*- -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>A transformation in steps</title>
  <link rel="shortcut icon" href="img/gatech.gif"/>

  
      <link rel="stylesheet" href="css/demo.css?vers=2759ff">
  

  <style>
      

html, body {
    margin:           0;
    height:           100%;
    background-color: white;
    overflow-x:       hidden;
}
.mathbox-wrapper {
    width:       33.333333%;
    padding-top: 33.333333%;
    position:    absolute;
    left:        0;
    top:         50%;
    transform:   translate(0, -50%);
    border:      1px solid black;
}
.mathbox-wrapper + .mathbox-wrapper {
    left: 33.333333%;
}
.mathbox-wrapper + .mathbox-wrapper + .mathbox-wrapper {
    left: 66.666666%;
}
.mathbox-wrapper > div {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}
.mathbox-label {
    position:  absolute;
    left:      50%;
    top:       10px;
    color:     black;
    opacity:   1.0;
    background-color: rgba(220, 220, 220, .5);
    border:    solid 1px rgba(50, 50, 50, .5);
    padding:   5px;
    transform: translate(-50%, 0);
}
.overlay-text {
    z-index: 1;
}

.color1 {
    color: var(--palette-green);
}
.color2 {
    color: var(--palette-blue);
}

  </style>

</head>
<body>
    

<div class="overlay-text">
  <p>Starting vector:
    <span id="vector1-here"></span>
    &nbsp;&nbsp;
    Reflect over <span class="color1">xy</span>-plane:
    <span id="vector2-here"></span>
    &nbsp;&nbsp;
    Project onto <span class="color2">yz</span>-plane:
      <span id="vector3-here"></span>
  </p>
</div>

<div class="mathbox-wrapper">
    <div id="mathbox1">
        
<div class="mathbox-label">Start</div>

    </div>
</div>
<div class="mathbox-wrapper">
    <div id="mathbox2">
        
<div class="mathbox-label">Reflect over <span class="color1">xy</span>-plane</div>

    </div>
</div>
<div class="mathbox-wrapper">
    <div id="mathbox3">
        
<div class="mathbox-label">Project onto <span class="color2">yz</span>-plane</div>

    </div>
</div>


    
        <script src="js/demo.js?vers=77646a"></script>
    

    <script type="text/javascript">
        "use strict";
        DomReady.ready(function() {

        var color1, color2, color3, computeOut, inLabel, outLabel, ref, ref1, setupDemo, updateCaption, vector1, vector1Elt, vector2, vector2Elt, vector3, vector3Elt;

vector1 = urlParams.get('x', 'float[]', [1, 2, 2]);

vector2 = [0, 0, 0];

vector3 = [0, 0, 0];

computeOut = function() {
  vector2[0] = vector1[0];
  vector2[1] = vector1[1];
  vector2[2] = -vector1[2];
  vector3[0] = 0;
  vector3[1] = vector2[1];
  vector3[2] = vector2[2];
  return updateCaption();
};

setupDemo = function(opts) {
  return new Demo({
    mathbox: {
      element: document.getElementById("mathbox" + opts.index)
    },
    scaleUI: false,
    camera: {
      position: [2, 1.4, 1.2]
    }
  }, function() {
    var labeled;
    this.index = opts.index, this.vector = opts.vector, this.color = opts.color, this.label = opts.label;
    window["mathbox" + this.index] = this.mathbox;
    this.viewObj = this.view({
      grid: false,
      viewRange: [[-3, 3], [-3, 3], [-3, 3]]
    });
    labeled = this.labeledVectors(this.viewObj, {
      name: "labeled",
      vectors: [this.vector],
      colors: [this.color],
      labels: this.label ? [this.label] : void 0,
      live: true,
      zeroPoints: true,
      zeroThreshold: 0.1,
      vectorOpts: {
        zIndex: 2
      },
      labelOpts: {
        zIndex: 3
      },
      zeroOpts: {
        zIndex: 3
      }
    });
    return this.viewObj.area({
      axes: [1, 2],
      rangeX: [-3, 3],
      rangeY: [-3, 3],
      width: 7,
      height: 7,
      live: false
    }).surface({
      color: new Color("green").arr(),
      lineX: true,
      lineY: true,
      fill: false,
      opacity: 0.75
    }).swizzle({
      order: "zxyw"
    }).surface({
      color: new Color("blue").arr(),
      lineX: true,
      lineY: true,
      fill: false,
      opacity: 0.75
    });
  });
};

color1 = new Color("green");

color2 = new Color("violet");

color3 = new Color("red");

inLabel = (ref = urlParams["in"]) != null ? ref : 'u';

window.demo1 = setupDemo({
  index: 1,
  vector: vector1,
  color: color1,
  label: inLabel
});

window.demo2 = setupDemo({
  index: 2,
  vector: vector2,
  color: color2
});

outLabel = (ref1 = urlParams.out) != null ? ref1 : 'T';

window.demo3 = setupDemo({
  index: 3,
  vector: vector3,
  color: color3,
  label: outLabel + "(" + inLabel + ")"
});

demo1.draggable(demo1.viewObj, {
  points: [vector1],
  postDrag: computeOut
});

groupControls(demo1, demo2, demo3);

vector1Elt = document.getElementById('vector1-here');

vector2Elt = document.getElementById('vector2-here');

vector3Elt = document.getElementById('vector3-here');

updateCaption = function() {
  var str;
  str = demo1.texVector(vector1, {
    color: color1
  });
  katex.render(str, vector1Elt);
  str = demo2.texVector(vector2, {
    color: color2
  });
  katex.render(str, vector2Elt);
  str = demo3.texVector(vector3, {
    color: color3
  });
  return katex.render(str, vector3Elt);
};

computeOut();


        });
    </script>
</body>
</html>

